<template>
    <!-- 常规选择器 -->
    <Popup v-model:show="show" position="bottom" @close="popupClose">
        <Picker
            :title="title"
            confirm-button-text="确定"
            :columns="columns"
            @cancel="pickerClose"
            @confirm="pickerConfirm"
        />
    </Popup>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { Popup, Picker } from 'vant';
import type { PickerColumn } from 'vant';

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    // 弹窗标题
    title: {
        type: String,
        default: ''
    },
    // 选择器列数据（参考vant传入数据格式）
    columns: {
        type: Array<PickerColumn>,
        default: () => []
    }
});

const emit = defineEmits(['close', 'confirm']);

const show = computed(() => props.isShow);

const popupClose = () => {
    emit('close');
};

const pickerClose = () => {
    emit('close');
};

const pickerConfirm = (val: string | string[]) => {
    emit('confirm', val);
};
</script>

<style lang="scss" scoped>
::v-deep {
    [class~="van-picker__cancel"] {
        color: #b5b5b5;
    }
    [class~="van-picker__confirm"] {
        color: #333333;
    }
    [class~="van-picker__title"] {
        color: #333333;
        font-size: 16px;
        font-weight: 500;
    }
    [class~="van-picker__columns"] {
        padding: 0 70px;
    }
    [class~="van-picker__frame"] {
        opacity: 0.03;
        background: #e60044;
        border-radius: 4px;
    }
    [class~="van-picker-column__item"] {
        color: #333333;
        font-size: 14px;
        font-weight: 500;
    }
}
</style>

